<template>
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-lg-12">
        <b-card header="<i class='fa fa-align-justify'></i> 产品分类">
          <div class="search-box">
            <!-- <b-button variant="outline-primary" @click="addProduct()">添加一级分类</b-button> -->
            <b-button variant="outline-primary" @click="addGoodsId()">添加goodsid</b-button>
          </div>
          <table class="table table-striped">
            <thead>
              <tr>
                <th>序号</th>
                <th>名称</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in lv1" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ item.class1name }}</td>
                <td>
                  <span class="badge badge-success" @click="lookMoreProduct(item.class1)">二级分类</span>
                  <span class="badge badge-success" @click="editProduct(item)">编辑</span>
                </td>
              </tr>
            </tbody>
          </table>
          <br>
        </b-card>
      </div>
    </div>
    <!-- 编辑diaolog -->
    <el-dialog :title="dialogTitle" @open="handleDialogOpen" :visible.sync="dialogVisible" append-to-body>
      <lv1-form-editing @close="dialogVisible = false" :form="editingForm"
       :reset="resetFormRandom" :isEdit="isEdit"></lv1-form-editing>
    </el-dialog>
  </div>
</template>

<script>
  import { mapState, mapActions, mapMutations } from 'vuex'
  import Lv1FormEditing from '@/components/Lv1FormEditing'
  export default {
    name: 'lv1',
    components: {
      Lv1FormEditing
    },
    data () {
      return {
        /* 添加分类dialog */
        dialogVisible: false,
        dialogTitle: '',
        editingForm: {},
        /* 用于清空form的验证状态 */
        resetFormRandom: 0,
        /* 编辑/新增状态 */
        isEdit: false
      }
    },
    computed: {
      ...mapState('ci', ['lv1'])
    },
    methods: {
      ...mapActions('ci', ['fetchLv1']),
      ...mapMutations('ci', ['setExpired']),
      lookMoreProduct (index) {
        this.$router.push({
          path: '/product/p_c_detail?id=' + index
        })
      },
      /* 新增 */
      addProduct () {
        this.dialogTitle = '添加一级分类'
        this.isEdit = false
        this.dialogVisible = true
        this.editingForm = {}
      },
      /* 编辑 */
      editProduct (item) {
        this.dialogTitle = '修改一级分类'
        this.isEdit = true
        this.dialogVisible = true
        this.editingForm = { ...item }
      },
      addGoodsId () {
        this.$router.push({
          path: '/product/p_goodsid'
        })
      },
      /* form dialog open */
      handleDialogOpen () {
        if (this.editingForm.class1name) return
        this.resetFormRandom = Math.random()
      }
    },
    created () {
      /* 拉取数据 */
      this.fetchLv1()
    }
  }
</script>
<style type="text/scss" rel="stylesheet/scss" lang="scss" scoped>
  @import '../../styles/common';
  .form-control {
    display: inline-block;
    width: 95%;
  }
</style>
